<template>
	<view class="three">
		<view class="hot_1 u-flex">
			<image style="" src="../../static/hot.png" mode=""></image>
			<view></view>
			<!-- <u-section title="热门推荐" bold font-size="30" :show-line="false" :right="false"></u-section> -->
			<text class="remen">热门推荐</text>
			<text class="more">查看更多></text>
		</view>
		<scroll-view scroll-x="true" class="three_one">
			<view class="three_one_one" v-for="(item,index) in imglist" :key="index" @tap="goDetails()">
				<image
					:src="item.imgUrl"
					mode=""></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				"imglist":[
					{
						"id":1,
						"imgUrl":"https://img2.baidu.com/it/u=1429742129,3388883706&fm=253&fmt=auto&app=138&f=JPEG?w=692&h=500"
					},
					{
						"id":2,
						"imgUrl":"https://pic2.zhimg.com/v2-a9ffec59be5dd49908d14f028d6aeb31_b.jpg"
					},
					{
						"id":3,
						"imgUrl":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-wc4mVhSKDZfImR9PyKHaVQH7jpCx0h-mgQ&usqp=CAU"
					},
					{
						"id":4,
						"imgUrl":"https://img2.baidu.com/it/u=1429742129,3388883706&fm=253&fmt=auto&app=138&f=JPEG?w=692&h=500"
					}
				]
			}
		},
		methods:{
			goDetails(){
				uni.navigateTo({
					url:'/pages/details/details'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.three {
		width: 700rpx;
		margin: 20rpx auto;
		padding-top: 10rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	
		image {
			width: 34rpx;
			height: 34rpx;
		}
	
		view {
			width: 20rpx;
		}
	
		.hot_1 {
			width: 100%;
			height: 60rpx;
			padding: 20rpx;
			padding-top: 30rpx;
			.remen{
				font-weight: bold;
				font-size: 30rpx;
			}
		}
	
		.more {
			margin-left: 350rpx;
		}
	
		.three_one {
			width: 96%;
			margin: 20rpx auto;
			padding-bottom: 20rpx;
			// background-color: #f5a300;
			white-space: nowrap;
	
			.three_one_one {
				width: 200rpx;
				height: 200rpx;
				justify-content: center;
				align-items: center;
				margin-left: 20rpx;
				display: inline-block;
	
				image {
					width: 196rpx;
					height: 196rpx;
					border-radius: 30rpx;
				}
			}
		}
	}
	
</style>